<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<!--通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。
			如果您想要单独引用该插件的功能，那么您需要引用 button.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
		-->
		<!--加载状态
			如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可
		-->
		<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 加载状态
		</button>
		<script>
			$(function() {
				$("#fat-btn").click(function() {
					$(this).button('loading').delay(1000).queue(function() {
						$(this).button('reset');
						$(this).dequeue();
					});
				});
			});
		</script>

		<!--单个切换
			如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可
		-->
		<button type="button" class="btn btn-primary" data-toggle="button"> 单个切换
		</button>

		<!--复选框（Checkbox）
			您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换。
		-->
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-primary">
				<input type="checkbox"> 选项 1
			</label>
			<label class="btn btn-primary">
				<input type="checkbox"> 选项 2
			</label>
			<label class="btn btn-primary">
				<input type="checkbox"> 选项 3
			</label>
		</div>

		<!--单选按钮（Radio）
			类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换。
		-->
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-primary">
				<input type="radio" name="options" id="option1"> 选项 1
			</label>
			<label class="btn btn-primary">
				<input type="radio" name="options" id="option2"> 选项 2
			</label>
			<label class="btn btn-primary">
				<input type="radio" name="options" id="option3"> 选项 3
			</label>
		</div>
	</body>
</html>